import React, { PropTypes, Component } from 'react'
import fetch from 'isomorphic-fetch'
import { Link } from 'react-router'

import Table from './Table'
import NavLink from './NavLink'
import style from './addStore.css'
import { myAjaxJson, ROOTURL} from './../publicAPI/publicAPI'

class DrivingSchool extends Component {

  constructor (props, context) {
      super(props, context);
      console.log("初始化");

      this.handleClick = this.handleClick.bind(this);
      this.isChecked = this.isChecked.bind(this);
      this.renderConfirm = this.renderConfirm.bind(this);

      this.state = {
        tData: [],
        isChecked: false,
        isCheckedId: '',
      }; // 初始化状态
  }

  

  componentWillMount() {
    console.log("将安装");
    let _this = this;
    
  }

  componentDidMount() {
    console.log("安装成功");
    this.handleGetInfo();
  }

  handleGetInfo() {
    let _this = this;

    //列出片段记录信道信息,然后获取片段
    myAjaxJson(ROOTURL + 'snippet/topic/search.api', 'POST', {}, function(data) {
      console.log(data);
      this.setState({
        topicArray: data,
      }, () => {
        myAjaxJson(ROOTURL +'snippet/snippet/search.api', 'POST', {}, function(data) {
          console.log(data);

          let customerIds = new Set();
          //数据处理，整理片段
          data.map((snippet) => {
            customerIds.add(snippet.uId);
          });
          let processData = [];
          Array.from(customerIds).map((customerId) => {
            let customerM = {customerId: customerId};
            data.map((snippet) => {
              if(snippet.uId == customerId) {
                customerM[snippet.topicId] = snippet.tx;
              }
            });
            processData.push(customerM);
          });
          //console.log(processData);
          _this.setState({
            tData: processData,
          });
        }.bind(_this), function(error) {})
      });
    }.bind(_this), function(error) {
      console.log('请求失败');
    })

    
  }

  isChecked(id) {
    let _this = this;

    this.setState({
      isChecked: true,
      isCheckedId: id,
    });
  }

  handleClick() {
    let _this = this;
    let id = this.state.isCheckedId;

    myAjaxJson(ROOTURL + 'snippet/snippet/review.api', 'POST', {u: id, topic: '是否交易', tx: '已交易'}, function(data) {
      console.log(data);
      _this.setState({
        isChecked: false,
      });
      _this.handleGetInfo();
    }, function(error) {});
  }

  /*handleDelete(id) {
    this.setState({
      delete: !this.state.delete,
      deleteId: id
    })
  }

  deleteAssistant(){
      var _this = this;

      myAjaxJson(ROOTURL + 'user/barber-assist/instance.api?id=' + this.state.deleteId, 'DELETE', {}, function(data) {
        console.log(data);
        myAjaxJson(ROOTURL + 'barber/profile/instance.api?id=' + _this.state.deleteId, 'DELETE', {}, function(data) {
          console.log(data);
          console.log('delete success');
          _this.handleGetInfo();
        }, function(error) { alert('删除失败') })
      }, function(error) { alert('删除失败') })

      _this.setState({
        delete: !_this.state.delete
      });
  }*/

  tHead() {
    var data = [
      {name: "姓名"},
      {name: "学校"},
      {name: "手机"},
      {name: "是否交易"},
      {name: "操作"}
    ];
    const _headArr = [];
    const _width = {
      "0" : "17.6%",
      "1" : "16.3%",
      "2" : "17.8%",
      "3" : "22.6%",
      "4" : "22.7%"
    };
    //_headArr.push(<th style={{width:'5%'}} role="1" key='' onClick={(e) => this.handleSelect(e)}></th>)
    _headArr.push(data.map((item, index) => <th style={{width: _width[index]}} role="1" key={index}>{item.name}</th>))
    return _headArr;
  }

  tBody() {
 
        return !this.state.tData[0]||this.state.tData.map((item) => {
          return (
            <tr key={item['customerId']}>    
              <td>{item['姓名']}</td>  
              <td>{item['学校']}</td>
              <td>{item['手机']}</td>
              <td>{item['是否交易']}</td>
              <td>
                <span className="rbtn green" onClick={this.isChecked.bind(this, item['customerId'])}>确认交易</span>
                {/*<span className="rbtn red" style={{marginLeft: "15px"}}>暂无删除功能</span>*/}
              </td>
            </tr>
          )
        })

    
  }

  renderConfirm() {
    return (
      <div>
        
      </div>
    );
  }
  
  render() {
    return (
      <div className="right-wapper">
        <div className="rt-wrap">
          <h2 className="catagory">
            <span className="cata-title">驾校报名管理</span>
            <Link to={`/DrivingSchoolMInput`}>
              <button className="add-btn" />
            </Link>
          </h2>

          <Table tHead={this.tHead.bind(this)()} tBody={this.tBody.bind(this)()} />
        </div>
        {
          !this.state.isChecked||this.renderConfirm()
        }
        { 
          this.state.isChecked ?
          <div id={style.msgDialog}>
            <div className={style['msgDialog_div']}><h3 id={style['msgDialog_title']}>交易提示？</h3><p id={style['msgDialog_content']}>确认交易？</p>
              <div className={style['msgDialog_button']}>
                <button id={style['msgDialog_yes']} onClick={this.handleClick.bind(this)}>确定</button>
                <button id={style['msgDialog_no']} onClick={()=>this.setState({isChecked: !this.state.isChecked, isCheckedId: ''})}>取消</button>
              </div>
            </div>
          </div> : null
        }
      </div>
    )
  }
}

export default DrivingSchool

